<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>博文详情</title>
    <link rel="stylesheet" href="assets/css/style.css" />
    <link
      rel="stylesheet"
      href="assets/vendors/font-awesome/css/font-awesome.css"
    />
    <link rel="stylesheet" href="assets/vendors/nprogress/nprogress.css" />
    <style>
      #aside {
        position: fixed !important;
        top: 0 !important;
      }
      #contentHtml img{
        max-height: 700px;
        width: auto;
      }
    </style>
  </head>

  <body>
    <header id="headerNavBar">
      <div id="containerBar">
        <a class="logoImg" href="index.html"
          ><img src="./assets/img/logo.png" alt=""
        /></a>
        <div id="linkBox">
          <span><a href="https://eshin.co.jp/">Eshinホーム</a></span>
          <span><a href="https://esna-web.com/">ESNAホーム</a></span>
          <span><a href="http://47.101.64.135/">Vue-OnLine</a></span>
          <span
            ><input id="inputSearch" type="text" /><i class="searchNav fa fa-search"></i
          ></span>
        </div>
        <div id="loginLink"><a href="/admin">登录</a></div>
      </div>
    </header>
    <div class="wrapper">
      <div class="topnav">
        <ul class="navBox"></ul>
      </div>
      <div class="header">
        <h1 class="logo">
          <a href="index.html"><img src="assets/img/logo.png" alt="" /></a>
        </h1>

        <ul class="nav navBox"></ul>
      </div>
      <div class="aside" id="aside">
        <div class="widgets">
          <h4>博文搜索</h4>
          <div class="body search">
            <form>
              <input
                type="text"
                class="keys"
                placeholder="输入关键字"
                id="searchcont2"
              />
              <input type="submit" class="btn" value="搜索" id="searchbtn2" />
            </form>
          </div>
        </div>
        <div class="widgets">
          <h4>外链地址</h4>
          <ul class="body random" id="randomBox"></ul>
        </div>
        <div class="widgets">
          <h4>最新评论，欢迎留言！</h4>
          <ul class="body discuz" id="commentsBox"></ul>
        </div>
      </div>
      <div class="content">
        <div class="article" id="postBox"></div>
        <div id="commentList"></div>
        <div id="commentBox"></div>
        <div class="panel hots">
          <h3>博文推荐</h3>
          <ul id="recommendBox"></ul>
        </div>
      </div>
      <div class="footer">
        <p>© 本站由个人独立制作 主要用于技术学习笔记存储</p>
      </div>
    </div>
    <script src="./assets/vendors/jquery/jquery.js"></script>
    <script src="./assets/vendors/nprogress/nprogress.js"></script>
    <script src="./assets/vendors/art-template/template-web.js"></script>
    <script src="./assets/js/recommend.js"></script>
    <script src="./assets/js/public.js"></script>
    <script src="./assets/js/detail.js"></script>
    <!-- 文章模板 -->
    <script type="text/html" id="postTpl">
      <div class="breadcrumb">
        <dl>
          <dt>当前位置：</dt>
          <dd><a href="javascript:;">{{category.title}}</a></dd>
          <dd>{{title}}</dd>
        </dl>
      </div>
      <h2 class="title">
        <a href="javascript:;">{{title}}</a>
      </h2>
      <div class="meta" style="text-align: right;">
        <span
          >{{author.nickName}} 发布于 {{$imports.formateDate(updateAt)}}</span
        >
        <span>分类: <a href="javascript:;">{{category.title}}</a></span>
        <i class="fa fa-book"></i><span>阅读: ({{meta.views}})</span>
        <i class="fa fa-comments"></i><span>评论: ({{meta.comments}})</span>
        <a href="javascript:;" id="like"
          ><i class="fa fa-thumbs-up"></i>赞(<b>{{meta.likes}}</b>)</a
        >
      </div>
      <div id="contentHtml"></div>
      
    </script>
    <!-- 评论列表模板 -->
    <script type="text/html" id="commentListTpl">
      <style>
        #commentsList {
          box-sizing: border-box;
          width: 100%;
          background-color: #fff !important;
          margin-bottom: 30px;
          padding: 20px;
        }
        #commentsList li {
          padding: 10px;
          border-bottom: 1px solid #eee;
        }
        #commentsList .contentCom {
          color: rgba(0, 0, 0, 0.6);
          width: 100%;
          font-size: 13px;
          text-align: left;
        }
        #commentsList p span {
          font-size: 12px;
          color: rgba(0, 0, 0, 0.5);
        }
        #commentsList p:last-child {
          margin-top: 12px;
          text-align: right;
        }
        #commentsList p span:last-child {
          margin-left: 20px;
        }
      </style>

      <ul id="commentsList">
        {{each}}
        <li style="display: {{$value.state == 1 ? 'block' : 'none'}};">
          <p class="contentCom">
            <strong>评论内容：</strong>{{$value.content}}
          </p>
          <p>
            <span>发表人:{{$value.author.nickName}}</span>
            <span> 评论时间:{{$imports.formateDate($value.createAt)}}</span>
          </p>
        </li>
        {{/each}}
      </ul>
    </script>

    <!-- 评论框模板 -->
    <script type="text/html" id="commentTpl">
      <style type="text/css">
        .comment {
          margin-bottom: 20px;
        }
        form {
          display: flex;
          align-items: center;
          justify-items: center;
        }

        .comment textarea {
          font-size: 14px;
          color: rgba(0, 0, 0, 0.7);
          line-height: 20px;
          box-sizing: border-box;
          flex: 1;
          height: 80px;
          display: block;
          padding: 10px;
        }

        .comment input {
          border-radius: 5px;
          width: 70px;
          height: 70px;
          margin-left: 20px;
          font-size: 13px;
          font-weight: 600;
          background-color: #fff;
          box-shadow: 0 1px 2px -1px rgb(0 0 0 / 20%),
            0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%);
        }
        .comment input:hover {
          background-color: rgb(247, 247, 247);
        }
      </style>
      <div class="comment">
        <form>
          <textarea id="contentValue" style="resize: none;"></textarea>
          <input id="toComments" type="submit" value="提交评论" />
        </form>
      </div>
    </script>

    <script>

      var btn2 = document.getElementById("searchbtn2");
      var cont2 = document.getElementById("searchcont2");
   
      btn2.onclick = function (e) {
        if (cont2.value.trim() == "") {
          e.preventDefault();
          alert("请输入搜索内容");
          return;
        }
      };
    </script>
  </body>
</html>
